<template>
  <a-modal v-model:open="open" centered :after-close="reset" :width="416" :ok-text="'创建'" :confirm-loading="confirmLoading" @ok="onOk">
    <template #title>
      <span>保存算法</span>
      <a-tooltip
        title="训练日志、资源监控等内容依托于算法代码，若算法不支持，则相关内容为空"
        :overlay-inner-style="{ width: '280px' }"
        overlay-class-name="custom-overlay-className"
      >
        <i class="iconfont icon-information-fill text-color-4 ml-4 h-22"></i>
      </a-tooltip>
    </template>
    <a-form ref="formRef" :model="formState" :rules="rules" layout="vertical">
      <a-form-item label="算法名称" name="name">
        <g-input v-model:value="formState.name" :search="false" :maxlength="200" placeholder="请输入算法名称" />
      </a-form-item>
      <a-form-item label="算法类型" name="type">
        <a-select v-model:value="formState.type" placeholder="请选择算法类型" :options="ALGO_TYPE_OPTIONS" />
      </a-form-item>
      <a-form-item label="算法描述" name="remark">
        <a-textarea v-model:value="formState.remark" v-trim placeholder="请输入算法描述" :maxlength="200" show-count />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
  import { type FormInstance, message } from 'ant-design-vue'
  import type { Rule } from 'ant-design-vue/es/form'
  import { nextTick, ref } from 'vue'

  import { algoDevApi } from '@/services/api'
  import { validateBitLen, validateDirName } from '@/utils'

  import { ALGO_TYPE_OPTIONS } from '../../options'

  export interface Props {
    afterCloseFn?: () => void
  }

  const props = withDefaults(defineProps<Props>(), {
    afterCloseFn: () => {}
  })

  const formRef = ref<FormInstance>()
  interface FormState {
    noteBookId?: number | string
    name: string
    remark: string
    type: number | string | undefined
    [key: string]: any
  }
  const open = ref(false)
  const formState = ref<FormState>({
    noteBookId: '',
    name: '',
    type: undefined,
    remark: ''
  })

  const rules: Record<string, Rule[]> = {
    name: [
      { required: true, trigger: 'change', message: '请输入算法名称' },
      { validator: validateDirName() },
      { validator: validateBitLen(200), trigger: 'change' }
    ],
    type: [{ required: true, trigger: 'change', message: '请选择算法类型' }]
  }

  const reset = () => {
    formRef.value?.resetFields()
    formState.value = {
      noteBookId: '',
      name: '',
      type: undefined,
      remark: ''
    }
  }

  const confirmLoading = ref(false)
  const onOk = async () => {
    await formRef.value?.validateFields()
    confirmLoading.value = true

    try {
      await algoDevApi.saveAlgo(formState.value)
      open.value = false
      props.afterCloseFn()
      message.success('算法创建成功')
      reset()
      confirmLoading.value = false
    } catch (error) {
      confirmLoading.value = false
    }
  }

  defineExpose({
    open: (id?: number | string) => {
      if (id) {
        formState.value.noteBookId = id
      }
      open.value = true
    }
  })
</script>

<style lang="less">
  .custom-overlay-className {
    padding-bottom: 2px !important;
  }
</style>
